<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统管理员端-首页</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f0f8ff;
            min-height: 100vh;
            color: #333;
            display: flex;
        }

        /* 左侧导航栏样式 */
        .sidebar {
            width: 250px;
            background: #1a2a6c;
            color: white;
            height: 100vh;
            position: fixed;
            overflow-y: auto;
            transition: width 0.3s ease;
        }

        .sidebar.collapsed {
            width: 70px;
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
        }

        .logo i {
            font-size: 1.5rem;
            min-width: 24px;
        }

        .sidebar-nav ul {
            list-style: none;
            padding: 0;
        }

        .nav-item {
            margin: 5px 0;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
            transition: background-color 0.3s;
            white-space: nowrap;
            overflow: hidden;
        }

        .nav-link:hover, .nav-item.active .nav-link {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .nav-link i {
            width: 20px;
            text-align: center;
            font-size: 1.1rem;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            margin-left: 250px;
            display: flex;
            flex-direction: column;
            transition: margin-left 0.3s ease;
        }

        .main-content.expanded {
            margin-left: 70px;
        }

        /* 顶部导航栏 */
        .top-navbar {
            background-color: white;
            padding: 15px 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .menu-toggle {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: #1a2a6c;
            padding: 5px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .menu-toggle:hover {
            background-color: #f0f0f0;
        }

        .page-title {
            color: #1a2a6c;
            font-size: 1.5rem;
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-profile img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background-color: #1a73e8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        /* 主要内容区域 */
        .container {
            padding: 20px 30px;
            flex: 1;
        }

        /* 信息发布区域 */
        .info-publish-section {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            margin-bottom: 30px;
        }

        .info-publish-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            border-bottom: 2px solid #1a2a6c;
            padding-bottom: 15px;
        }

        .info-publish-header h2 {
            color: #1a2a6c;
            font-size: 1.8rem;
            margin: 0;
        }

        .publish-btn {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .publish-btn:hover {
            background: #0d62d9;
        }

        .info-list {
            display: grid;
            gap: 20px;
        }

        .info-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border-left: 4px solid #1a73e8;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .info-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .info-title {
            color: #1a2a6c;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .info-title i {
            color: #1a73e8;
        }

        .info-content {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .info-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: #888;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        .info-actions {
            display: flex;
            gap: 10px;
        }

        .info-action-btn {
            background: none;
            border: none;
            color: #1a73e8;
            cursor: pointer;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color 0.3s;
        }

        .info-action-btn:hover {
            color: #0d62d9;
        }

        /* 功能管理表格样式 */
        .function-table-section {
            margin-bottom: 40px;
        }

        .function-table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .function-table-header h2 {
            color: #1a2a6c;
            font-size: 1.8rem;
        }

        .add-btn {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .add-btn:hover {
            background: #0d62d9;
        }

        .function-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .function-table th {
            background-color: #1a2a6c;
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: 600;
        }

        .function-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .function-table tr:last-child td {
            border-bottom: none;
        }

        .function-table tr:hover {
            background-color: #f8f9fa;
        }

        .function-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 10px;
        }

        .function-name {
            display: flex;
            align-items: center;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow: auto;
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: modalFade 0.3s;
        }

        @keyframes modalFade {
            from {opacity: 0; transform: translateY(-50px);}
            to {opacity: 1; transform: translateY(0);}
        }

        .modal-header {
            background: #1a2a6c;
            color: white;
            padding: 20px;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            margin: 0;
        }

        .close {
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #ddd;
        }

        .modal-body {
            padding: 20px;
            max-height: 70vh;
            overflow-y: auto;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #1a2a6c;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #1a73e8;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 30px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s;
        }

        .btn-cancel {
            background: #f1f3f4;
            color: #333;
        }

        .btn-cancel:hover {
            background: #e0e0e0;
        }

        .btn-save {
            background: #1a73e8;
            color: white;
        }

        .btn-save:hover {
            background: #0d62d9;
        }

        /* 标签页样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }

        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            font-weight: 500;
        }

        .tab.active {
            border-bottom: 3px solid #1a73e8;
            color: #1a73e8;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .tip-section {
            margin-bottom: 30px;
        }

        .tip-section h3 {
            color: #1a2a6c;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .tip-list {
            list-style-type: none;
        }

        .tip-list li {
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            align-items: flex-start;
        }

        .tip-list li:before {
            content: "•";
            color: #1a73e8;
            font-weight: bold;
            margin-right: 10px;
        }

        .rule-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .rule-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #1a73e8;
        }

        .rule-card h4 {
            margin-bottom: 10px;
            color: #1a2a6c;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                width: 70px;
            }

            .sidebar:not(.collapsed) .logo span,
            .sidebar:not(.collapsed) .nav-link span {
                display: none;
            }

            .main-content {
                margin-left: 70px;
            }

            .info-publish-header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }

            .info-meta {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }

            .function-table {
                display: block;
                overflow-x: auto;
            }

            .modal-content {
                width: 95%;
                margin: 10% auto;
            }

            .tabs {
                flex-wrap: wrap;
            }

            .rule-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<!-- 左侧导航栏 -->
<aside class="sidebar">
    <div class="sidebar-header">
        <h1 class="logo">
            <span>图书馆座位预约管理系统</span>
        </h1>
    </div>
    <nav class="sidebar-nav">
        <ul>
            <li class="nav-item active">
                <a href="index.html" class="nav-link">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="seat-management1.html" class="nav-link">
                    <i class="fa fa-th-large"></i>
                    <span>座位管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="booking-management.html" class="nav-link">
                    <i class="fa fa-calendar-check-o"></i>
                    <span>预约管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="user-management1.html" class="nav-link">
                    <i class="fa fa-users"></i>
                    <span>用户管理</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>

<!-- 主内容区域 -->
<div class="main-content">
    <!-- 顶部导航栏 -->
    <header class="top-navbar">
        <div class="navbar-left">
            <button class="menu-toggle" id="menuToggle">
                <i class="fa fa-bars"></i>
            </button>
            <h2 class="page-title">首页</h2>
        </div>
        <div class="user-profile">
            <div class="user-profile">
                <img src="manager.png" alt="管理员头像">
                <span>管理员</span>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="container">
        <!-- 信息发布区域 -->
        <section class="info-publish-section">
            <div class="info-publish-header">
                <h2>信息发布</h2>
                <button class="publish-btn" id="publishInfoBtn">
                    <i class="fa fa-plus"></i>
                    发布信息
                </button>
            </div>
            <div class="info-list" id="infoList">
                <div class="info-item" data-id="1">
                    <div class="info-title">
                        <i class="fa fa-bullhorn"></i>
                        系统维护通知
                    </div>
                    <div class="info-content">
                        图书馆座位预约系统将于本周六（10月28日）上午8:00-10:00进行系统维护，届时系统将暂停服务，请各位用户提前做好安排。
                    </div>
                    <div class="info-meta">
                        <span>发布时间：2025-10-24 09:30</span>
                        <div class="info-actions">
                            <button class="info-action-btn edit-btn">
                                <i class="fa fa-edit"></i>编辑
                            </button>
                            <button class="info-action-btn delete-btn">
                                <i class="fa fa-trash"></i>删除
                            </button>
                        </div>
                    </div>
                </div>
                <div class="info-item" data-id="2">
                    <div class="info-title">
                        <i class="fa fa-exclamation-triangle"></i>
                        违规行为提醒
                    </div>
                    <div class="info-content">
                        近期发现部分用户存在预约后未按时签到、使用完毕不退座等违规行为。请各位用户遵守预约规则，共同维护良好的学习环境。
                    </div>
                    <div class="info-meta">
                        <span>发布时间：2025-10-23 14:15</span>
                        <div class="info-actions">
                            <button class="info-action-btn edit-btn">
                                <i class="fa fa-edit"></i>编辑
                            </button>
                            <button class="info-action-btn delete-btn">
                                <i class="fa fa-trash"></i>删除
                            </button>
                        </div>
                    </div>
                </div>
                <div class="info-item" data-id="3">
                    <div class="info-title">
                        <i class="fa fa-calendar-check-o"></i>
                        节假日开放安排
                    </div>
                    <div class="info-content">
                        元旦期间（1月1日-1月3日）图书馆正常开放，座位预约系统照常运行。祝各位读者节日愉快！
                    </div>
                    <div class="info-meta">
                        <span>发布时间：2025-09-28 16:45</span>
                        <div class="info-actions">
                            <button class="info-action-btn edit-btn">
                                <i class="fa fa-edit"></i>编辑
                            </button>
                            <button class="info-action-btn delete-btn">
                                <i class="fa fa-trash"></i>删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能管理表格 -->
        <section class="function-table-section">
            <div class="function-table-header">
                <h2>系统功能管理</h2>
            </div>
            <table class="function-table">
                <thead>
                <tr>
                    <th>功能名称</th>
                    <th>功能描述</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <div class="function-name">
                            <div class="function-icon" style="background-color: #1a73e8;">
                                <i class="fa fa-th-large"></i>
                            </div>
                            座位管理
                        </div>
                    </td>
                    <td>管理图书馆所有座位信息，包括座位的添加、修改、删除和查看</td>
                </tr>
                <tr>
                    <td>
                        <div class="function-name">
                            <div class="function-icon" style="background-color: #34a853;">
                                <i class="fa fa-calendar-check-o"></i>
                            </div>
                            预约管理
                        </div>
                    </td>
                    <td>管理所有座位的预约记录，包括查询所有状态及待确认、已确认、已取消、已完成、已逾期的预约记录，可实现按日期、按楼层查询</td>
                </tr>
                <tr>
                    <td>
                        <div class="function-name">
                            <div class="function-icon" style="background-color: #fbbc05;">
                                <i class="fa fa-users"></i>
                            </div>
                            用户管理
                        </div>
                    </td>
                    <td>管理系统用户账户，包括用户的添加、删除、修改信息和查询用户</td>
                </tr>
                </tbody>
            </table>
        </section>
    </div>
</div>

<!-- 信息发布模态框 -->
<div id="infoPublishModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="infoModalTitle">发布信息</h2>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body">
            <form id="infoPublishForm">
                <input type="hidden" id="editInfoId" value="">
                <div class="form-group">
                    <label for="infoTitle">信息标题</label>
                    <input type="text" id="infoTitle" class="form-control" placeholder="请输入信息标题">
                </div>
                <div class="form-group">
                    <label for="infoContent">信息内容</label>
                    <textarea id="infoContent" class="form-control" rows="6" placeholder="请输入信息内容"></textarea>
                </div>
                <div class="form-group">
                    <label for="infoType">信息类型</label>
                    <select id="infoType" class="form-control">
                        <option value="notice">系统通知</option>
                        <option value="warning">违规提醒</option>
                        <option value="schedule">开放安排</option>
                        <option value="other">其他信息</option>
                    </select>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-cancel" id="cancelPublishBtn">取消</button>
                    <button type="submit" class="btn btn-save" id="saveInfoBtn">发布</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // 信息管理功能
    let infoItems = [
        {
            id: 1,
            title: "系统维护通知",
            content: "图书馆座位预约系统将于本周六（10月28日）上午8:00-10:00进行系统维护，届时系统将暂停服务，请各位用户提前做好安排。",
            type: "notice",
            time: "2025-10-24 09:30"
        },
        {
            id: 2,
            title: "违规行为提醒",
            content: "近期发现部分用户存在预约后未按时签到、使用完毕不退座等违规行为。请各位用户遵守预约规则，共同维护良好的学习环境。",
            type: "warning",
            time: "2025-10-23 14:15"
        },
        {
            id: 3,
            title: "节假日开放安排",
            content: "元旦期间（1月1日-1月3日）图书馆正常开放，座位预约系统照常运行。祝各位读者节日愉快！",
            type: "schedule",
            time: "2025-09-28 16:45"
        }
    ];

    // 模态框功能实现
    const infoPublishModal = document.getElementById('infoPublishModal');
    const publishInfoBtn = document.getElementById('publishInfoBtn');
    const cancelPublishBtn = document.getElementById('cancelPublishBtn');
    const infoPublishForm = document.getElementById('infoPublishForm');
    const infoList = document.getElementById('infoList');
    const infoModalTitle = document.getElementById('infoModalTitle');
    const editInfoId = document.getElementById('editInfoId');
    const saveInfoBtn = document.getElementById('saveInfoBtn');
    const closeButtons = document.getElementsByClassName('close');

    // 初始化信息列表
    function renderInfoList() {
        infoList.innerHTML = '';
        infoItems.forEach(item => {
            const infoItem = document.createElement('div');
            infoItem.className = 'info-item';
            infoItem.setAttribute('data-id', item.id);

            // 根据类型设置图标
            let iconClass = 'fa fa-bullhorn';
            if (item.type === 'warning') iconClass = 'fa fa-exclamation-triangle';
            if (item.type === 'schedule') iconClass = 'fa fa-calendar-check-o';
            if (item.type === 'other') iconClass = 'fa fa-info-circle';

            infoItem.innerHTML = `
                <div class="info-title">
                    <i class="${iconClass}"></i>
                    ${item.title}
                </div>
                <div class="info-content">
                    ${item.content}
                </div>
                <div class="info-meta">
                    <span>发布时间：${item.time}</span>
                    <div class="info-actions">
                        <button class="info-action-btn edit-btn">
                            <i class="fa fa-edit"></i>编辑
                        </button>
                        <button class="info-action-btn delete-btn">
                            <i class="fa fa-trash"></i>删除
                        </button>
                    </div>
                </div>
            `;
            infoList.appendChild(infoItem);
        });

        // 重新绑定事件
        bindEditDeleteEvents();
    }

    // 绑定编辑和删除事件
    function bindEditDeleteEvents() {
        // 编辑按钮事件
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const infoItem = this.closest('.info-item');
                const id = parseInt(infoItem.getAttribute('data-id'));
                editInfo(id);
            });
        });

        // 删除按钮事件
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const infoItem = this.closest('.info-item');
                const id = parseInt(infoItem.getAttribute('data-id'));
                deleteInfo(id);
            });
        });
    }

    // 编辑信息
    function editInfo(id) {
        const item = infoItems.find(item => item.id === id);
        if (item) {
            document.getElementById('infoTitle').value = item.title;
            document.getElementById('infoContent').value = item.content;
            document.getElementById('infoType').value = item.type;
            editInfoId.value = id;
            infoModalTitle.textContent = '编辑信息';
            saveInfoBtn.textContent = '保存';
            infoPublishModal.style.display = 'block';
        }
    }

    // 删除信息
    function deleteInfo(id) {
        if (confirm('确定要删除这条信息吗？')) {
            infoItems = infoItems.filter(item => item.id !== id);
            renderInfoList();
        }
    }

    // 打开信息发布模态框
    publishInfoBtn.onclick = function() {
        infoPublishForm.reset();
        editInfoId.value = '';
        infoModalTitle.textContent = '发布信息';
        saveInfoBtn.textContent = '发布';
        infoPublishModal.style.display = 'block';
    }

    // 关闭模态框
    for (let i = 0; i < closeButtons.length; i++) {
        closeButtons[i].onclick = function() {
            infoPublishModal.style.display = 'none';
        }
    }

    // 点击模态框外部关闭
    window.onclick = function(event) {
        if (event.target == infoPublishModal) {
            infoPublishModal.style.display = 'none';
        }
    }

    // 取消按钮
    cancelPublishBtn.onclick = function() {
        infoPublishModal.style.display = 'none';
    }

    // 表单提交
    infoPublishForm.onsubmit = function(e) {
        e.preventDefault();

        const title = document.getElementById('infoTitle').value;
        const content = document.getElementById('infoContent').value;
        const type = document.getElementById('infoType').value;
        const id = editInfoId.value;

        if (!title || !content) {
            alert('请填写完整的信息标题和内容！');
            return false;
        }

        if (id) {
            // 编辑现有信息
            const index = infoItems.findIndex(item => item.id === parseInt(id));
            if (index !== -1) {
                infoItems[index].title = title;
                infoItems[index].content = content;
                infoItems[index].type = type;
                alert('信息修改成功！');
            }
        } else {
            // 添加新信息
            const newId = infoItems.length > 0 ? Math.max(...infoItems.map(item => item.id)) + 1 : 1;
            const now = new Date();
            const timeString = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;

            infoItems.push({
                id: newId,
                title: title,
                content: content,
                type: type,
                time: timeString
            });

            alert('信息发布成功！');
        }

        renderInfoList();
        infoPublishModal.style.display = 'none';
        return false;
    }

    // 菜单切换功能
    const menuToggle = document.getElementById('menuToggle');
    const sidebar = document.querySelector('.sidebar');
    const mainContent = document.querySelector('.main-content');

    if (menuToggle) {
        menuToggle.addEventListener('click', function() {
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('expanded');
        });
    }

    // 初始化页面
    renderInfoList();
</script>
</body>
</html>

























<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>图书馆座位预约系统管理员端-首页</title>-->
<!--    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;-->
<!--        }-->

<!--        body {-->
<!--            background-color: #f0f8ff;-->
<!--            min-height: 100vh;-->
<!--            color: #333;-->
<!--            display: flex;-->
<!--        }-->

<!--        /* 左侧导航栏样式 */-->
<!--        .sidebar {-->
<!--            width: 250px;-->
<!--            background: #1a2a6c;-->
<!--            color: white;-->
<!--            height: 100vh;-->
<!--            position: fixed;-->
<!--            overflow-y: auto;-->
<!--            transition: width 0.3s ease;-->
<!--        }-->

<!--        .sidebar.collapsed {-->
<!--            width: 70px;-->
<!--        }-->

<!--        .sidebar-header {-->
<!--            padding: 20px;-->
<!--            border-bottom: 1px solid rgba(255, 255, 255, 0.1);-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: space-between;-->
<!--        }-->

<!--        .logo {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 10px;-->
<!--            font-size: 1.2rem;-->
<!--            font-weight: bold;-->
<!--            white-space: nowrap;-->
<!--            overflow: hidden;-->
<!--        }-->

<!--        .logo i {-->
<!--            font-size: 1.5rem;-->
<!--            min-width: 24px;-->
<!--        }-->

<!--        .sidebar-nav ul {-->
<!--            list-style: none;-->
<!--            padding: 0;-->
<!--        }-->

<!--        .nav-item {-->
<!--            margin: 5px 0;-->
<!--        }-->

<!--        .nav-link {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 15px;-->
<!--            padding: 15px 20px;-->
<!--            color: white;-->
<!--            text-decoration: none;-->
<!--            transition: background-color 0.3s;-->
<!--            white-space: nowrap;-->
<!--            overflow: hidden;-->
<!--        }-->

<!--        .nav-link:hover, .nav-item.active .nav-link {-->
<!--            background-color: rgba(255, 255, 255, 0.1);-->
<!--        }-->

<!--        .nav-link i {-->
<!--            width: 20px;-->
<!--            text-align: center;-->
<!--            font-size: 1.1rem;-->
<!--        }-->

<!--        /* 主内容区域 */-->
<!--        .main-content {-->
<!--            flex: 1;-->
<!--            margin-left: 250px;-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            transition: margin-left 0.3s ease;-->
<!--        }-->

<!--        .main-content.expanded {-->
<!--            margin-left: 70px;-->
<!--        }-->

<!--        /* 顶部导航栏 */-->
<!--        .top-navbar {-->
<!--            background-color: white;-->
<!--            padding: 15px 30px;-->
<!--            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--        }-->

<!--        .navbar-left {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 15px;-->
<!--        }-->

<!--        .menu-toggle {-->
<!--            background: none;-->
<!--            border: none;-->
<!--            font-size: 1.2rem;-->
<!--            cursor: pointer;-->
<!--            color: #1a2a6c;-->
<!--            padding: 5px;-->
<!--            border-radius: 4px;-->
<!--            transition: background-color 0.3s;-->
<!--        }-->

<!--        .menu-toggle:hover {-->
<!--            background-color: #f0f0f0;-->
<!--        }-->

<!--        .page-title {-->
<!--            color: #1a2a6c;-->
<!--            font-size: 1.5rem;-->
<!--        }-->

<!--        .user-profile {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 10px;-->
<!--        }-->

<!--        .user-profile img {-->
<!--            width: 40px;-->
<!--            height: 40px;-->
<!--            border-radius: 50%;-->
<!--            object-fit: cover;-->
<!--            background-color: #1a73e8;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            color: white;-->
<!--            font-weight: bold;-->
<!--        }-->

<!--        /* 统计卡片区域 */-->
<!--        .stats-row {-->
<!--            display: grid;-->
<!--            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));-->
<!--            gap: 20px;-->
<!--            padding: 20px 30px;-->
<!--        }-->

<!--        .stat-card {-->
<!--            background: linear-gradient(135deg, #1a2a6c, #1a73e8);-->
<!--            border-radius: 10px;-->
<!--            padding: 20px;-->
<!--            color: white;-->
<!--            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);-->
<!--        }-->

<!--        .stat-header {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            margin-bottom: 15px;-->
<!--        }-->

<!--        .stat-icon {-->
<!--            font-size: 1.5rem;-->
<!--            margin-right: 10px;-->
<!--        }-->

<!--        .stat-value {-->
<!--            font-size: 2rem;-->
<!--            font-weight: bold;-->
<!--            margin-bottom: 10px;-->
<!--        }-->

<!--        .stat-footer {-->
<!--            font-size: 0.9rem;-->
<!--            opacity: 0.9;-->
<!--        }-->

<!--        /* 主要内容区域 */-->
<!--        .container {-->
<!--            padding: 20px 30px;-->
<!--            flex: 1;-->
<!--        }-->

<!--        /* 信息发布区域 */-->
<!--        .info-publish-section {-->
<!--            background-color: rgba(255, 255, 255, 0.95);-->
<!--            border-radius: 12px;-->
<!--            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);-->
<!--            padding: 30px;-->
<!--            margin-bottom: 30px;-->
<!--        }-->

<!--        .info-publish-header {-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--            margin-bottom: 25px;-->
<!--            border-bottom: 2px solid #1a2a6c;-->
<!--            padding-bottom: 15px;-->
<!--        }-->

<!--        .info-publish-header h2 {-->
<!--            color: #1a2a6c;-->
<!--            font-size: 1.8rem;-->
<!--            margin: 0;-->
<!--        }-->

<!--        .publish-btn {-->
<!--            background: #1a73e8;-->
<!--            color: white;-->
<!--            border: none;-->
<!--            padding: 10px 20px;-->
<!--            border-radius: 6px;-->
<!--            cursor: pointer;-->
<!--            font-weight: 500;-->
<!--            transition: background-color 0.3s;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 8px;-->
<!--        }-->

<!--        .publish-btn:hover {-->
<!--            background: #0d62d9;-->
<!--        }-->

<!--        .info-list {-->
<!--            display: grid;-->
<!--            gap: 20px;-->
<!--        }-->

<!--        .info-item {-->
<!--            background: #f8f9fa;-->
<!--            border-radius: 8px;-->
<!--            padding: 20px;-->
<!--            border-left: 4px solid #1a73e8;-->
<!--            transition: transform 0.3s, box-shadow 0.3s;-->
<!--        }-->

<!--        .info-item:hover {-->
<!--            transform: translateY(-2px);-->
<!--            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);-->
<!--        }-->

<!--        .info-title {-->
<!--            color: #1a2a6c;-->
<!--            font-size: 1.2rem;-->
<!--            font-weight: 600;-->
<!--            margin-bottom: 10px;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 10px;-->
<!--        }-->

<!--        .info-title i {-->
<!--            color: #1a73e8;-->
<!--        }-->

<!--        .info-content {-->
<!--            color: #666;-->
<!--            line-height: 1.6;-->
<!--            margin-bottom: 15px;-->
<!--        }-->

<!--        .info-meta {-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--            font-size: 0.9rem;-->
<!--            color: #888;-->
<!--            border-top: 1px solid #eee;-->
<!--            padding-top: 10px;-->
<!--        }-->

<!--        .info-actions {-->
<!--            display: flex;-->
<!--            gap: 10px;-->
<!--        }-->

<!--        .info-action-btn {-->
<!--            background: none;-->
<!--            border: none;-->
<!--            color: #1a73e8;-->
<!--            cursor: pointer;-->
<!--            font-size: 0.85rem;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 5px;-->
<!--            transition: color 0.3s;-->
<!--        }-->

<!--        .info-action-btn:hover {-->
<!--            color: #0d62d9;-->
<!--        }-->

<!--        /* 功能管理表格样式 */-->
<!--        .function-table-section {-->
<!--            margin-bottom: 40px;-->
<!--        }-->

<!--        .function-table-header {-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .function-table-header h2 {-->
<!--            color: #1a2a6c;-->
<!--            font-size: 1.8rem;-->
<!--        }-->

<!--        .add-btn {-->
<!--            background: #1a73e8;-->
<!--            color: white;-->
<!--            border: none;-->
<!--            padding: 10px 20px;-->
<!--            border-radius: 6px;-->
<!--            cursor: pointer;-->
<!--            font-weight: 500;-->
<!--            transition: background-color 0.3s;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            gap: 8px;-->
<!--        }-->

<!--        .add-btn:hover {-->
<!--            background: #0d62d9;-->
<!--        }-->

<!--        .function-table {-->
<!--            width: 100%;-->
<!--            border-collapse: collapse;-->
<!--            background: white;-->
<!--            border-radius: 8px;-->
<!--            overflow: hidden;-->
<!--            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);-->
<!--        }-->

<!--        .function-table th {-->
<!--            background-color: #1a2a6c;-->
<!--            color: white;-->
<!--            padding: 15px;-->
<!--            text-align: left;-->
<!--            font-weight: 600;-->
<!--        }-->

<!--        .function-table td {-->
<!--            padding: 15px;-->
<!--            border-bottom: 1px solid #eee;-->
<!--        }-->

<!--        .function-table tr:last-child td {-->
<!--            border-bottom: none;-->
<!--        }-->

<!--        .function-table tr:hover {-->
<!--            background-color: #f8f9fa;-->
<!--        }-->

<!--        .function-icon {-->
<!--            width: 40px;-->
<!--            height: 40px;-->
<!--            border-radius: 50%;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            color: white;-->
<!--            font-size: 16px;-->
<!--            margin-right: 10px;-->
<!--        }-->

<!--        .function-name {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--        }-->

<!--        /* 模态框样式 */-->
<!--        .modal {-->
<!--            display: none;-->
<!--            position: fixed;-->
<!--            top: 0;-->
<!--            left: 0;-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--            background-color: rgba(0, 0, 0, 0.7);-->
<!--            z-index: 1000;-->
<!--            overflow: auto;-->
<!--        }-->

<!--        .modal-content {-->
<!--            background-color: white;-->
<!--            margin: 5% auto;-->
<!--            padding: 0;-->
<!--            border-radius: 12px;-->
<!--            width: 90%;-->
<!--            max-width: 800px;-->
<!--            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);-->
<!--            animation: modalFade 0.3s;-->
<!--        }-->

<!--        @keyframes modalFade {-->
<!--            from {opacity: 0; transform: translateY(-50px);}-->
<!--            to {opacity: 1; transform: translateY(0);}-->
<!--        }-->

<!--        .modal-header {-->
<!--            background: #1a2a6c;-->
<!--            color: white;-->
<!--            padding: 20px;-->
<!--            border-radius: 12px 12px 0 0;-->
<!--            display: flex;-->
<!--            justify-content: space-between;-->
<!--            align-items: center;-->
<!--        }-->

<!--        .modal-header h2 {-->
<!--            margin: 0;-->
<!--        }-->

<!--        .close {-->
<!--            color: white;-->
<!--            font-size: 28px;-->
<!--            font-weight: bold;-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .close:hover {-->
<!--            color: #ddd;-->
<!--        }-->

<!--        .modal-body {-->
<!--            padding: 20px;-->
<!--            max-height: 70vh;-->
<!--            overflow-y: auto;-->
<!--        }-->

<!--        /* 表单样式 */-->
<!--        .form-group {-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .form-group label {-->
<!--            display: block;-->
<!--            margin-bottom: 8px;-->
<!--            font-weight: 500;-->
<!--            color: #1a2a6c;-->
<!--        }-->

<!--        .form-control {-->
<!--            width: 100%;-->
<!--            padding: 10px;-->
<!--            border: 1px solid #ddd;-->
<!--            border-radius: 6px;-->
<!--            font-size: 1rem;-->
<!--            transition: border-color 0.3s;-->
<!--        }-->

<!--        .form-control:focus {-->
<!--            outline: none;-->
<!--            border-color: #1a73e8;-->
<!--        }-->

<!--        .form-actions {-->
<!--            display: flex;-->
<!--            justify-content: flex-end;-->
<!--            gap: 10px;-->
<!--            margin-top: 30px;-->
<!--        }-->

<!--        .btn-cancel {-->
<!--            background: #f1f3f4;-->
<!--            color: #333;-->
<!--        }-->

<!--        .btn-cancel:hover {-->
<!--            background: #e0e0e0;-->
<!--        }-->

<!--        .btn-save {-->
<!--            background: #1a73e8;-->
<!--            color: white;-->
<!--        }-->

<!--        .btn-save:hover {-->
<!--            background: #0d62d9;-->
<!--        }-->

<!--        /* 标签页样式 */-->
<!--        .tabs {-->
<!--            display: flex;-->
<!--            border-bottom: 1px solid #ddd;-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .tab {-->
<!--            padding: 12px 20px;-->
<!--            cursor: pointer;-->
<!--            border-bottom: 3px solid transparent;-->
<!--            font-weight: 500;-->
<!--        }-->

<!--        .tab.active {-->
<!--            border-bottom: 3px solid #1a73e8;-->
<!--            color: #1a73e8;-->
<!--        }-->

<!--        .tab-content {-->
<!--            display: none;-->
<!--        }-->

<!--        .tab-content.active {-->
<!--            display: block;-->
<!--        }-->

<!--        .tip-section {-->
<!--            margin-bottom: 30px;-->
<!--        }-->

<!--        .tip-section h3 {-->
<!--            color: #1a2a6c;-->
<!--            margin-bottom: 15px;-->
<!--            padding-bottom: 10px;-->
<!--            border-bottom: 1px solid #eee;-->
<!--        }-->

<!--        .tip-list {-->
<!--            list-style-type: none;-->
<!--        }-->

<!--        .tip-list li {-->
<!--            padding: 10px 0;-->
<!--            border-bottom: 1px solid #f5f5f5;-->
<!--            display: flex;-->
<!--            align-items: flex-start;-->
<!--        }-->

<!--        .tip-list li:before {-->
<!--            content: "•";-->
<!--            color: #1a73e8;-->
<!--            font-weight: bold;-->
<!--            margin-right: 10px;-->
<!--        }-->

<!--        .rule-grid {-->
<!--            display: grid;-->
<!--            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));-->
<!--            gap: 20px;-->
<!--        }-->

<!--        .rule-card {-->
<!--            background: #f8f9fa;-->
<!--            padding: 15px;-->
<!--            border-radius: 8px;-->
<!--            border-left: 4px solid #1a73e8;-->
<!--        }-->

<!--        .rule-card h4 {-->
<!--            margin-bottom: 10px;-->
<!--            color: #1a2a6c;-->
<!--        }-->

<!--        /* 响应式设计 */-->
<!--        @media (max-width: 768px) {-->
<!--            .sidebar {-->
<!--                width: 70px;-->
<!--            }-->

<!--            .sidebar:not(.collapsed) .logo span,-->
<!--            .sidebar:not(.collapsed) .nav-link span {-->
<!--                display: none;-->
<!--            }-->

<!--            .main-content {-->
<!--                margin-left: 70px;-->
<!--            }-->

<!--            .stats-row {-->
<!--                grid-template-columns: 1fr;-->
<!--            }-->

<!--            .info-publish-header {-->
<!--                flex-direction: column;-->
<!--                gap: 15px;-->
<!--                align-items: flex-start;-->
<!--            }-->

<!--            .info-meta {-->
<!--                flex-direction: column;-->
<!--                gap: 10px;-->
<!--                align-items: flex-start;-->
<!--            }-->

<!--            .function-table {-->
<!--                display: block;-->
<!--                overflow-x: auto;-->
<!--            }-->

<!--            .modal-content {-->
<!--                width: 95%;-->
<!--                margin: 10% auto;-->
<!--            }-->

<!--            .tabs {-->
<!--                flex-wrap: wrap;-->
<!--            }-->

<!--            .rule-grid {-->
<!--                grid-template-columns: 1fr;-->
<!--            }-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--&lt;!&ndash; 左侧导航栏 &ndash;&gt;-->
<!--<aside class="sidebar">-->
<!--    <div class="sidebar-header">-->
<!--        <h1 class="logo">-->
<!--            <span>图书馆座位预约管理系统</span>-->
<!--        </h1>-->
<!--    </div>-->
<!--    <nav class="sidebar-nav">-->
<!--        <ul>-->
<!--            <li class="nav-item active">-->
<!--                <a href="index.html" class="nav-link">-->
<!--                    <i class="fa fa-home"></i>-->
<!--                    <span>首页</span>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="nav-item">-->
<!--                <a href="seat-management1.html" class="nav-link">-->
<!--                    <i class="fa fa-th-large"></i>-->
<!--                    <span>座位管理</span>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="nav-item">-->
<!--                <a href="booking-management.html" class="nav-link">-->
<!--                    <i class="fa fa-calendar-check-o"></i>-->
<!--                    <span>预约管理</span>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="nav-item">-->
<!--                <a href="user-management1.html" class="nav-link">-->
<!--                    <i class="fa fa-users"></i>-->
<!--                    <span>用户管理</span>-->
<!--                </a>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </nav>-->
<!--</aside>-->

<!--&lt;!&ndash; 主内容区域 &ndash;&gt;-->
<!--<div class="main-content">-->
<!--    &lt;!&ndash; 顶部导航栏 &ndash;&gt;-->
<!--    <header class="top-navbar">-->
<!--        <div class="navbar-left">-->
<!--            <button class="menu-toggle" id="menuToggle">-->
<!--                <i class="fa fa-bars"></i>-->
<!--            </button>-->
<!--            <h2 class="page-title">首页</h2>-->
<!--        </div>-->
<!--        <div class="user-profile">-->
<!--            <div class="user-profile">-->
<!--                <img src="manager.png" alt="管理员头像">-->
<!--                <span>管理员</span>-->
<!--            </div>-->
<!--        </div>-->
<!--    </header>-->

<!--    &lt;!&ndash; 统计卡片区域 &ndash;&gt;-->
<!--    <div class="stats-row">-->
<!--        <div class="stat-card">-->
<!--            <div class="stat-header">-->
<!--                <i class="fa fa-th-large stat-icon"></i>-->
<!--                <h3>总座位数</h3>-->
<!--            </div>-->
<!--            <div class="stat-value">1,256</div>-->
<!--            <div class="stat-footer">-->
<!--                <span>较上月 +2.3%</span>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--            <div class="stat-header">-->
<!--                <i class="fa fa-calendar-check-o stat-icon"></i>-->
<!--                <h3>今日预约率</h3>-->
<!--            </div>-->
<!--            <div class="stat-value">84.6%</div>-->
<!--            <div class="stat-footer">-->
<!--                <span>较昨日 +5.2%</span>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--            <div class="stat-header">-->
<!--                <i class="fa fa-check-circle stat-icon"></i>-->
<!--                <h3>今日履约率</h3>-->
<!--            </div>-->
<!--            <div class="stat-value">92.3%</div>-->
<!--            <div class="stat-footer">-->
<!--                <span>较上周 +1.8%</span>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--            <div class="stat-header">-->
<!--                <i class="fa fa-exclamation-triangle stat-icon"></i>-->
<!--                <h3>今日未履约率</h3>-->
<!--            </div>-->
<!--            <div class="stat-value">7.7%</div>-->
<!--            <div class="stat-footer">-->
<!--                <span>较上周 -1.8%</span>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 主要内容区域 &ndash;&gt;-->
<!--    <div class="container">-->
<!--        &lt;!&ndash; 信息发布区域 &ndash;&gt;-->
<!--        <section class="info-publish-section">-->
<!--            <div class="info-publish-header">-->
<!--                <h2>信息发布</h2>-->
<!--                <button class="publish-btn" id="publishInfoBtn">-->
<!--                    <i class="fa fa-plus"></i>-->
<!--                    发布信息-->
<!--                </button>-->
<!--            </div>-->
<!--            <div class="info-list">-->
<!--                <div class="info-item">-->
<!--                    <div class="info-title">-->
<!--                        <i class="fa fa-bullhorn"></i>-->
<!--                        系统维护通知-->
<!--                    </div>-->
<!--                    <div class="info-content">-->
<!--                        图书馆座位预约系统将于本周六（10月28日）上午8:00-10:00进行系统维护，届时系统将暂停服务，请各位用户提前做好安排。-->
<!--                    </div>-->
<!--                    <div class="info-meta">-->
<!--                        <span>发布时间：2025-10-24 09:30</span>-->
<!--                        <div class="info-actions">-->
<!--                            <button class="info-action-btn">-->
<!--                                <i class="fa fa-edit"></i>编辑-->
<!--                            </button>-->
<!--                            <button class="info-action-btn">-->
<!--                                <i class="fa fa-trash"></i>删除-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="info-item">-->
<!--                    <div class="info-title">-->
<!--                        <i class="fa fa-exclamation-triangle"></i>-->
<!--                        违规行为提醒-->
<!--                    </div>-->
<!--                    <div class="info-content">-->
<!--                        近期发现部分用户存在预约后未按时签到、使用完毕不退座等违规行为。请各位用户遵守预约规则，共同维护良好的学习环境。-->
<!--                    </div>-->
<!--                    <div class="info-meta">-->
<!--                        <span>发布时间：2025-10-23 14:15</span>-->
<!--                        <div class="info-actions">-->
<!--                            <button class="info-action-btn">-->
<!--                                <i class="fa fa-edit"></i>编辑-->
<!--                            </button>-->
<!--                            <button class="info-action-btn">-->
<!--                                <i class="fa fa-trash"></i>删除-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="info-item">-->
<!--                    <div class="info-title">-->
<!--                        <i class="fa fa-calendar-check-o"></i>-->
<!--                        节假日开放安排-->
<!--                    </div>-->
<!--                    <div class="info-content">-->
<!--                        元旦期间（1月1日-1月3日）图书馆正常开放，座位预约系统照常运行。祝各位读者节日愉快！-->
<!--                    </div>-->
<!--                    <div class="info-meta">-->
<!--                        <span>发布时间：2025-09-28 16:45</span>-->
<!--                        <div class="info-actions">-->
<!--                            <button class="info-action-btn">-->
<!--                                <i class="fa fa-edit"></i>编辑-->
<!--                            </button>-->
<!--                            <button class="info-action-btn">-->
<!--                                <i class="fa fa-trash"></i>删除-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </section>-->

<!--        &lt;!&ndash; 功能管理表格 &ndash;&gt;-->
<!--        <section class="function-table-section">-->
<!--            <div class="function-table-header">-->
<!--                <h2>系统功能管理</h2>-->
<!--            </div>-->
<!--            <table class="function-table">-->
<!--                <thead>-->
<!--                <tr>-->
<!--                    <th>功能名称</th>-->
<!--                    <th>功能描述</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody>-->
<!--                <tr>-->
<!--                    <td>-->
<!--                        <div class="function-name">-->
<!--                            <div class="function-icon" style="background-color: #1a73e8;">-->
<!--                                <i class="fa fa-th-large"></i>-->
<!--                            </div>-->
<!--                            座位管理-->
<!--                        </div>-->
<!--                    </td>-->
<!--                    <td>管理图书馆所有座位信息，包括座位的添加、修改、删除和查看</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td>-->
<!--                        <div class="function-name">-->
<!--                            <div class="function-icon" style="background-color: #34a853;">-->
<!--                                <i class="fa fa-calendar-check-o"></i>-->
<!--                            </div>-->
<!--                            预约管理-->
<!--                        </div>-->
<!--                    </td>-->
<!--                    <td>管理所有座位的预约记录，包括查询所有状态及待确认、已确认、已取消、已完成、已逾期的预约记录，可实现按日期、按楼层查询</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td>-->
<!--                        <div class="function-name">-->
<!--                            <div class="function-icon" style="background-color: #fbbc05;">-->
<!--                                <i class="fa fa-users"></i>-->
<!--                            </div>-->
<!--                            用户管理-->
<!--                        </div>-->
<!--                    </td>-->
<!--                    <td>管理系统用户账户，包括用户的添加、删除、修改信息和查询用户</td>-->
<!--                </tr>-->
<!--                </tbody>-->
<!--            </table>-->
<!--        </section>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 信息发布模态框 &ndash;&gt;-->
<!--<div id="infoPublishModal" class="modal">-->
<!--    <div class="modal-content">-->
<!--        <div class="modal-header">-->
<!--            <h2>发布信息</h2>-->
<!--            <span class="close">&times;</span>-->
<!--        </div>-->
<!--        <div class="modal-body">-->
<!--            <form id="infoPublishForm">-->
<!--                <div class="form-group">-->
<!--                    <label for="infoTitle">信息标题</label>-->
<!--                    <input type="text" id="infoTitle" class="form-control" placeholder="请输入信息标题">-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                    <label for="infoContent">信息内容</label>-->
<!--                    <textarea id="infoContent" class="form-control" rows="6" placeholder="请输入信息内容"></textarea>-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                    <label for="infoType">信息类型</label>-->
<!--                    <select id="infoType" class="form-control">-->
<!--                        <option value="notice">系统通知</option>-->
<!--                        <option value="warning">违规提醒</option>-->
<!--                        <option value="schedule">开放安排</option>-->
<!--                        <option value="other">其他信息</option>-->
<!--                    </select>-->
<!--                </div>-->
<!--                <div class="form-actions">-->
<!--                    <button type="button" class="btn btn-cancel" id="cancelPublishBtn">取消</button>-->
<!--                    <button type="submit" class="btn btn-save">发布</button>-->
<!--                </div>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 功能管理模态框 &ndash;&gt;-->
<!--<div id="functionModal" class="modal">-->
<!--    <div class="modal-content">-->
<!--        <div class="modal-header">-->
<!--            <h2 id="modalTitle">添加功能</h2>-->
<!--            <span class="close">&times;</span>-->
<!--        </div>-->
<!--        <div class="modal-body">-->
<!--            <form id="functionForm">-->
<!--                <div class="form-group">-->
<!--                    <label for="functionName">功能名称</label>-->
<!--                    <input type="text" id="functionName" class="form-control" placeholder="请输入功能名称">-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                    <label for="functionDescription">功能描述</label>-->
<!--                    <textarea id="functionDescription" class="form-control" rows="3" placeholder="请输入功能描述"></textarea>-->
<!--                </div>-->
<!--                <div class="form-actions">-->
<!--                    <button type="button" class="btn btn-cancel" id="cancelBtn">取消</button>-->
<!--                    <button type="submit" class="btn btn-save">保存</button>-->
<!--                </div>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 座位预约说明模态框 &ndash;&gt;-->
<!--<div id="instructionModal" class="modal">-->
<!--    <div class="modal-content">-->
<!--        <div class="modal-header">-->
<!--            <h2>座位预约说明</h2>-->
<!--            <span class="close">&times;</span>-->
<!--        </div>-->
<!--        <div class="modal-body">-->
<!--            <div class="tabs">-->
<!--                <div class="tab active" data-tab="usage">使用流程</div>-->
<!--                <div class="tab" data-tab="tips">预约小贴士</div>-->
<!--                <div class="tab" data-tab="rules">预约规则</div>-->
<!--                <div class="tab" data-tab="supervision">监督规则</div>-->
<!--                <div class="tab" data-tab="violation">违规规则</div>-->
<!--            </div>-->

<!--            <div id="usage" class="tab-content active">-->
<!--                <div class="tip-section">-->
<!--                    <h3>座位预约</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li><strong>预约选座：</strong>通过选择日期、时间、区域、座位进行预约，适用于有明确目标座位的预约情形。</li>-->
<!--                        <li><strong>快速选座：</strong>首页"快速选座"按钮，设置筛选条件，系统会自动分配符合条件的座位给您，适用于"随遇而安"型的预约。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tip-section">-->
<!--                    <h3>扫码签到</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li>在预约开始时间的前30分钟和后30分钟内进行签到。</li>-->
<!--                        <li>如果没有按时签到，将被记录为违约行为。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tip-section">-->
<!--                    <h3>暂离</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li>如使用过程中需要暂时离开座位，请点击首页当前预约卡片中的暂离按钮。</li>-->
<!--                        <li>暂离时长为60分钟，您需要在规定时间内返回，并扫码落座。</li>-->
<!--                        <li>在此期间内，您的座位将会受到保护。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tip-section">-->
<!--                    <h3>退座</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li>使用完毕后，在首页当前预约卡片，点击退座按钮。</li>-->
<!--                        <li>退座后该座位将被释放，同时记录您成功履约一次。</li>-->
<!--                        <li>如使用完毕后没有退座，将被记录为违约行为。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div id="tips" class="tab-content">-->
<!--                <div class="tip-section">-->
<!--                    <h3>座位预约小贴士</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li><strong>使用要预约</strong> - 使用座位前请先进行预约</li>-->
<!--                        <li><strong>预约要签到</strong> - 按时签到确认使用座位</li>-->
<!--                        <li><strong>离座要暂离</strong> - 暂时离开请使用暂离功能</li>-->
<!--                        <li><strong>用完要退座</strong> - 使用完毕请及时退座</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div id="rules" class="tab-content">-->
<!--                <div class="tip-section">-->
<!--                    <h3>预约规则</h3>-->
<!--                    <div class="rule-grid">-->
<!--                        <div class="rule-card">-->
<!--                            <h4>预约开始时间</h4>-->
<!--                            <p>提前1天的 22:00</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>单次预约时长</h4>-->
<!--                            <p>不限制</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>座位预留时长</h4>-->
<!--                            <p>30分钟</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>每日取消次数</h4>-->
<!--                            <p>不限</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>每周取消次数</h4>-->
<!--                            <p>不限</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>暂离时长</h4>-->
<!--                            <p>60分钟</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>监督时长</h4>-->
<!--                            <p>30分钟</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>用餐时段</h4>-->
<!--                            <p>11:30至13:00<br>17:30至19:00</p>-->
<!--                        </div>-->
<!--                        <div class="rule-card">-->
<!--                            <h4>用餐时段暂离</h4>-->
<!--                            <p>可暂离90分钟</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div id="supervision" class="tab-content">-->
<!--                <div class="tip-section">-->
<!--                    <h3>监督规则</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li>如您发现某个显示在使用中的座位实际无人就坐，可扫描座位二维码发起监督。</li>-->
<!--                        <li>被监督人需要在30分钟内重新扫码落座或退座。</li>-->
<!--                        <li>被监督人在监督时间内重新扫码落座，可继续使用座位。</li>-->
<!--                        <li>被监督人在监督时间内退座，记为正常履约，并且座位释放。</li>-->
<!--                        <li>被监督人在监督时间内未重新扫码落座或退座，记为一次违约，并且座位释放。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div id="violation" class="tab-content">-->
<!--                <div class="tip-section">-->
<!--                    <h3>违规规则</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li>预约后没有在规定时间内签到，将被记录为违约。</li>-->
<!--                        <li>使用完毕不退座记录为违约。</li>-->
<!--                        <li>暂离时未在60分钟内返回扫码落座，将被记录为违约。</li>-->
<!--                        <li>监督后未在30分钟内返回或退座，将被记录为违约。</li>-->
<!--                        <li>每周违约次数达到3次，将暂停本周的预约功能。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tip-section">-->
<!--                    <h3>约法三章</h3>-->
<!--                    <ul class="tip-list">-->
<!--                        <li>使用座位前请先进行预约，在预约时段内，预约人拥有该座位的使用权。请没有预约的同学将座位让给已经预约的同学。杜绝"霸座"现象从我做起。</li>-->
<!--                        <li>禁止使用任何非正常手段进行签到等操作，否则暂停预约功能。</li>-->
<!--                        <li>您的所有履约情况将被记录，请履约守信，点滴积累自己的信用记录。</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--<script>-->
<!--    // 模态框功能实现-->
<!--    const modal = document.getElementById('instructionModal');-->
<!--    const functionModal = document.getElementById('functionModal');-->
<!--    const infoPublishModal = document.getElementById('infoPublishModal');-->
<!--    const btn = document.getElementById('btnInstruction');-->
<!--    const span = document.getElementsByClassName('close');-->
<!--    const addFunctionBtn = document.getElementById('addFunctionBtn');-->
<!--    const publishInfoBtn = document.getElementById('publishInfoBtn');-->
<!--    const cancelBtn = document.getElementById('cancelBtn');-->
<!--    const cancelPublishBtn = document.getElementById('cancelPublishBtn');-->
<!--    const functionForm = document.getElementById('functionForm');-->
<!--    const infoPublishForm = document.getElementById('infoPublishForm');-->

<!--    // 打开信息发布模态框-->
<!--    publishInfoBtn.onclick = function() {-->
<!--        infoPublishForm.reset();-->
<!--        infoPublishModal.style.display = 'block';-->
<!--    }-->

<!--    // 打开功能管理模态框-->
<!--    addFunctionBtn.onclick = function() {-->
<!--        document.getElementById('modalTitle').textContent = '添加功能';-->
<!--        functionForm.reset();-->
<!--        functionModal.style.display = 'block';-->
<!--    }-->

<!--    // 关闭模态框-->
<!--    for (let i = 0; i < span.length; i++) {-->
<!--        span[i].onclick = function() {-->
<!--            modal.style.display = 'none';-->
<!--            functionModal.style.display = 'none';-->
<!--            infoPublishModal.style.display = 'none';-->
<!--        }-->
<!--    }-->

<!--    // 点击模态框外部关闭-->
<!--    window.onclick = function(event) {-->
<!--        if (event.target == modal) {-->
<!--            modal.style.display = 'none';-->
<!--        }-->
<!--        if (event.target == functionModal) {-->
<!--            functionModal.style.display = 'none';-->
<!--        }-->
<!--        if (event.target == infoPublishModal) {-->
<!--            infoPublishModal.style.display = 'none';-->
<!--        }-->
<!--    }-->

<!--    // 取消按钮-->
<!--    cancelBtn.onclick = function() {-->
<!--        functionModal.style.display = 'none';-->
<!--    }-->

<!--    cancelPublishBtn.onclick = function() {-->
<!--        infoPublishModal.style.display = 'none';-->
<!--    }-->

<!--    // 表单提交-->
<!--    functionForm.onsubmit = function(e) {-->
<!--        e.preventDefault();-->
<!--        alert('功能保存成功！');-->
<!--        functionModal.style.display = 'none';-->
<!--        return false;-->
<!--    }-->

<!--    infoPublishForm.onsubmit = function(e) {-->
<!--        e.preventDefault();-->
<!--        alert('信息发布成功！');-->
<!--        infoPublishModal.style.display = 'none';-->
<!--        return false;-->
<!--    }-->

<!--    // 标签页功能-->
<!--    const tabs = document.querySelectorAll('.tab');-->
<!--    const tabContents = document.querySelectorAll('.tab-content');-->

<!--    tabs.forEach(tab => {-->
<!--        tab.addEventListener('click', () => {-->
<!--            // 移除所有活动标签-->
<!--            tabs.forEach(t => t.classList.remove('active'));-->
<!--            tabContents.forEach(content => content.classList.remove('active'));-->

<!--            // 设置当前标签为活动状态-->
<!--            tab.classList.add('active');-->
<!--            const tabId = tab.getAttribute('data-tab');-->
<!--            document.getElementById(tabId).classList.add('active');-->
<!--        });-->
<!--    });-->

<!--    // 菜单切换功能-->
<!--    const menuToggle = document.getElementById('menuToggle');-->
<!--    const sidebar = document.querySelector('.sidebar');-->
<!--    const mainContent = document.querySelector('.main-content');-->

<!--    if (menuToggle) {-->
<!--        menuToggle.addEventListener('click', function() {-->
<!--            sidebar.classList.toggle('collapsed');-->
<!--            mainContent.classList.toggle('expanded');-->
<!--        });-->
<!--    }-->
<!--</script>-->
<!--</body>-->
<!--</html>-->